<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
	<xsl:include href="./SectionElementView.xsl"/>
	
	<xsl:param name="contextId" select="/generation-template/@contextId"/>
	<xsl:param name="templates" select="document(concat('../templates.jsp?contextId=', $contextId))" />

	<xsl:template match="/">
		<xsl:apply-templates select="child::node()" />
	</xsl:template>
	
	<xsl:template match="/generation-template">
		<html>
			<head>
				<link rel="stylesheet" type="text/css" href="style/jquery.treeview.css"></link>
				<link rel="stylesheet" type="text/css" href="style/jquery-ui-1.8.8.custom.css"></link>
				<link rel="stylesheet" type="text/css" href="style/reset-fonts-grids.css"></link>
				<link rel="stylesheet" type="text/css" href="style/tmpl.css"></link>
				
				<link rel="stylesheet" type="text/css" href="style/yui/treeview.css"></link>
				
				<script type="text/javascript" src="js/jquery-1.4.4.min.js"></script>
				<script type="text/javascript" src="js/jquery-ui-1.8.8.custom.min.js"></script>
				<script type="text/javascript" src="js/jquery.treeview.js"></script>
				
				<script type="text/javascript" src="js/yui/yahoo-dom-event.js"></script>
				<script type="text/javascript" src="js/yui/connection.js"></script>
				<script type="text/javascript" src="js/yui/treeview.js"></script>
				
				<script type="text/javascript" src="js/xml/XMLObjects.js"></script>
				
				<script type="text/javascript" src="js/tmpl/SectionElementHandlers.js"></script>
				<script type="text/javascript" src="js/tmpl/XMLTGenerationTemplate.js"></script>
				<script type="text/javascript">
					contextId = '<xsl:value-of select="$contextId"/>';
				</script>
			</head>
			<body>
				Add file descriptors to match against instances and generate files from them.
				Multiple descriptors may refer to the same template or instance.
				
				<div class="header">Output folder path</div>
				<input id="outputFolderPath" type="text" style="width: 100%;" value="{outputFolder}" onchange="setDirtyFlag(true)"/>
				<br/>
				<div class="header">
					<a href="#" onclick="addDescriptor();return false;">Add a file descriptor</a>
				</div>
				<div id="descriptors">
					<xsl:apply-templates select="descriptor" />
				</div>
				<div id="templatesContainer" style="display: none">
					<div id="{concat('descriptorTemplate_', '__INDEX__')}" class="descriptor">
						<div onclick="$(this).next().toggle();" class="header"
							style="cursor: pointer;">
							Show/Hide 
							<a href="#" onclick="deleteDescriptor(this); return false;">delete</a>
						</div>
						<table border="1" style="width: 100%">
							<tbody>
								<tr>
									<td colspan="2">Match instances of template:
										<div id="{concat('descriptorTemplateContainer_', '__INDEX__')}" style="display: inline">
											<select onchange="">
												<option value="">Select one</option>
												<xsl:for-each select="$templates/templates/template">
													<option value="{@ref}">
														<xsl:value-of select="@ref"/>
													</option>
												</xsl:for-each>
											</select>
										</div>
									</td>
								</tr>
								<tr>
									<td colspan="2">Only accept instances which satisfy condition:
										<textarea id="{concat('descriptorFilter_', '__INDEX__')}" style="width: 100%; boder: 1px solid black;">
											<xsl:value-of select="filter" />
										</textarea>
									</td>
								</tr>
								<tr>
									<td colspan="2">Generation path:
										<div id="{concat('descriptorGenPath_', '__INDEX__')}" type="genPath" class="sectionGenPath droppable" contenteditable="true">
											<xsl:apply-templates select="path" />
										</div>
									</td>
								</tr>
								<tr>
									<td valign="top" style="overflow: auto;">
										<div id="{concat('descriptorTree_', '__INDEX__')}">Select a match template</div>
									</td>
									<td width="80%" valign="top">
										Drag and drop elements from left or type to add content
										<div id="{concat('descriptorBody_', '__INDEX__')}" type="body" class="sectionBody droppable" contenteditable="true" onkeypress="setDirtyFlag(true);">
											<xsl:apply-templates select="body" />
										</div>
									</td>
								</tr>
							</tbody>
						</table>
					</div>
					<script type="text/javascript">
					addInitializer(function() {
							initDropTargets('<xsl:value-of select="'__INDEX__'"/>');
							initTree('', '<xsl:value-of select="concat('descriptorTree_', '__INDEX__')"/>');
					});
					</script>
				</div>
			</body>
		</html>
	</xsl:template>
	
	<xsl:template match="descriptor">
		<xsl:param name="templateRef" select="@templateRef"/>
		<xsl:param name="index" select="position()"/>
		<div id="{concat('descriptorTemplate_', $index)}" class="descriptor">
			<div onclick="$(this).next().toggle();" class="header"
				style="cursor: pointer;">
				Show/Hide 
				<a href="#" onclick="deleteDescriptor(this); return false;">delete</a>
			</div>
			<table border="1" style="width: 100%">
				<tbody>
					<tr>
						<td colspan="2">Match instances of template:
							<div id="{concat('descriptorTemplateContainer_', $index)}" style="display: inline">
								<select onchange="">
									<option value="">Select one</option>
									<xsl:for-each select="$templates/templates/template">
										<option value="{@ref}">
											<xsl:if test="$templateRef = @ref">
												<xsl:attribute name="selected">selected</xsl:attribute>
											</xsl:if>
											<xsl:value-of select="@ref"/>
										</option>
									</xsl:for-each>
								</select>
							</div>
						</td>
					</tr>
					<tr>
						<td colspan="2">Only accept instances which satisfy condition:
							<textarea id="{concat('descriptorFilter_', $index)}" style="width: 100%; boder: 1px solid black;" onchange="setDirtyFlag(true)">
								<xsl:value-of select="filter" />
							</textarea>
						</td>
					</tr>
					<tr>
						<td colspan="2">Generation path:
							<div id="{concat('descriptorGenPath_', $index)}" type="genPath" class="sectionGenPath droppable" contenteditable="true">
								<xsl:apply-templates select="path" />
							</div>
						</td>
					</tr>
					<tr>
						<td valign="top" style="overflow: auto;">
							<div id="{concat('descriptorTree_', $index)}">Select a match template</div>
						</td>
						<td width="80%" valign="top">
							Drag and drop elements from left or type to add content
							<div id="{concat('descriptorBody_', $index)}" type="body" class="sectionBody droppable" contenteditable="true" onkeypress="setDirtyFlag(true);">
								<xsl:apply-templates select="body" />
							</div>
						</td>
					</tr>
				</tbody>
			</table>
		</div>
		<script>
		addInitializer(function() {
				initDropTargets('<xsl:value-of select="$index"/>');
				initTree('<xsl:value-of select="$templateRef"/>', '<xsl:value-of select="concat('descriptorTree_', $index)"/>');
		});
		</script>
	</xsl:template>
	
	<xsl:template match="br">
		<br/>
	</xsl:template>
</xsl:stylesheet>